import React from 'react';
import {StyleSheet, View, ScrollView} from 'react-native';
import Toast from 'react-native-easy-toast';
import SharePlatform from '../../../share/SharePlatform';
import UShare from '../../../share/share';


import Top from './top';
import Form from './form';
import Bottom from './bottom';
import SocialAccount from './socialAccount';
import Header from '../../../components/header';
import Loading from '../../../components/loading';

import utils from '../../../common/utils';
import api from '../../../common/api';
import auth from '../../../common/auth';

export default class extends React.Component {
    state = {
        isFetching: false,          //正在登录
        isLoading: false
    };
    //跳转注册页
    linkToRegister = () => {
        this.props.navigation.replace('register');
    };
    //检查手机号
    checkPhone = (phone) => {
        if (!phone) {
            this.showToast('请填写手机号');
            return false;
        }
        if (!utils.checkMobile(phone)) {
            this.showToast('手机号码格式不正确');
            return false;
        }
        return true;
    };

    //提交登录
    submit = (phone, pwd) => {
        if (this.state.isFetching) {
            return;
        }
        if (!this.checkPhone(phone)) {
            return;
        }
        if (!pwd) {
            this.showToast('请填写密码');
            return;
        }
        this.setState({
            isFetching: true
        });
        api({url: 'api/member/loginByPhone', data: {phone, pwd}, notNeedLogin: true})
            .then(data => {
                auth.setUserInfo(data)
                    .then(() => {
                        auth.goBack();
                    });
            })
            .catch(e => {
                this.showToast(e.msg);
            })
            .finally(() => {
                this.setState({
                    isFetching: false
                });
            });
    };

    //微信登录
    loginByWechat = () => {
        UShare.authLogin(SharePlatform.WECHAT, (result) => {
            const {code, userName, userAvatar, userId, userGender} = result;
            if (code === 0) {
                this.setState({
                    isLoading: true
                });
                api({
                    url: 'api/member/loginByWx',
                    data: {nickname: userName, openid: userId, unionid: userId, avatar: userAvatar, userGender}
                })
                    .then(data => {
                        auth.setUserInfo(data)
                            .then(() => {
                                auth.goBack();
                            });
                    })
                    .catch(e => {
                        this.showToast(e.msg);
                    })
                    .finally(() => {
                        this.setState({
                            isLoading: false
                        });
                    });
            } else {
                this.showToast('授权失败');
            }
        });
    };

    //toast弹出
    showToast = (text, time = 1000) => {
        this.refs.toast.show(text, time);
    };

    componentWillUnmount() {
        auth.setIsInLoginPage(false);
    }

    render() {
        const {isFetching, isLoading} = this.state;
        return (
            <View style={styles.container}>
                <Header/>
                <ScrollView style={{flex: 1}} keyboardShouldPersistTaps="handled">
                    <Top/>
                    <Form submit={this.submit} isFetching={isFetching}/>
                    <Bottom linkToRegister={this.linkToRegister}/>
                    <SocialAccount loginByWechat={this.loginByWechat}/>
                </ScrollView>
                <Loading isLoading={isLoading}/>
                <Toast ref="toast" position="center"/>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        backgroundColor: '#ffffff',
        flex: 1
    }
});
